import React from 'react';
import { ScrollView, Text, Image, View, WebView } from 'react-native';
import styles from '../styles';
import { fromNow } from '../../../../utils';
import Timer from '../../../../components/timer';

export default class Detail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 0,
      height: 0
    };
  }
  onLayout = e => {
    const { width } = e.nativeEvent.layout;
    this.setState({
      width,
      height: (width / 3) * 2
    });
  };
  timer = data => {
    const { type, collectCustomerEvent, collectPolicyEvent } = data;
    switch (type) {
      case 10:
        return <Timer date={collectCustomerEvent.endTime} />;
      case 11:
        return <Timer date={collectPolicyEvent.endTime} />;
      default:
        return null;
    }
  };
  imageTags = data => {
    const { type, collectCustomerEvent, collectPolicyEvent } = data;
    switch (type) {
      case 10: {
        const { totalGathered } = collectCustomerEvent;
        return (
          <View style={styles.imageTags}>
            <Text style={styles.imageTagLabel}>已采集</Text>
            <Text style={styles.imageTagValue}>{totalGathered}</Text>
            <Text style={styles.imageTagLabel}>位</Text>
          </View>
        );
      }
      case 11: {
        const { targetAmount, reachAmount } = collectPolicyEvent;
        return (
          <View style={styles.imageTags}>
            <Text style={styles.imageTagLabel}>已完成/总量</Text>
            <Text style={styles.imageTagValue}>{reachAmount}/{targetAmount}</Text>
            <Text style={styles.imageTagLabel}>元</Text>
          </View>
        );
      }
      default:
        return null;
    }
  };
  render() {
    const { profileImgUrl, title, creationTime, description } = this.props.data;
    return (
      <ScrollView style={styles.main}>
        <View style={styles.mainCont}>
          <View
            style={[styles.titleImg, { height: this.state.height }]}
            onLayout={this.onLayout}
          >
            {this.imageTags(this.props.data)}
            <Image
              source={{ uri: profileImgUrl }}
              style={{
                width: this.state.width,
                height: this.state.height,
                resizeMode: 'cover'
              }}
            />
          </View>
          {this.timer(this.props.data)}
          <View style={styles.titleWrap}>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.date}>发布于 {fromNow(creationTime)}</Text>
          </View>
          <View style={styles.contWrap}>
            <Text style={styles.contText}>{description}</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}
